<template>
    <div class="product-list">
<!--     头部面包屑-->
      <CenterContent>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{item.title}}</el-breadcrumb-item>
        </el-breadcrumb>

        <!--      分类栏-->
        <div  class="product-where">
        <el-row :gutter="30" type="flex" justify="start" >
          <el-col :span="2">产品分类:</el-col>
        </el-row>
        </div>
<!--        筛选-->
        <div  class="product-screening">
          <el-row :gutter="30" type="flex" justify="start" >
            <el-col :span="2" style="padding-left: 30px"><el-link :underline="false" disabled>筛选排序</el-link></el-col>
            <el-col :span="1"><el-link :underline="false" disabled type="primary">默认</el-link></el-col>
            <el-col :span="1"><el-link :underline="false">价格</el-link></el-col>
            <el-col :span="1"><el-link :underline="false">销量</el-link></el-col>
            <el-col :span="1"><el-link :underline="false">评论</el-link></el-col>
          </el-row>
        </div>
<!--        列表-->
        <div class="product-list" v-if="product.length!==0">
          <el-row :gutter="20" type="flex" justify="start" v-for="item in chuckProudct" :key="item" v >
           <el-col :span="4" v-for="next in item" :key="next.id" >
             <el-link @click="jumpShow(next.id)" :underline="false">
               <ProductItem :title="next.title" :price="next.price" :src="next.image"></ProductItem>
             </el-link>
           </el-col>
          </el-row>
        </div>
        <div v-else class="product-list">
          <el-row :gutter="10" type="flex" justify="center">
           <el-col :span="5">暂无更多的内容~~~~~~~~~~</el-col>
          </el-row>
        </div>
<!--        分页-->
        <el-row :gutter="10" type="flex" justify="center">
         <el-col :span="6">
           <el-pagination
             class="product-pagination"
             background
             layout="prev, pager, next"
             :total="meta.total"
             :page-size="meta.total"
             :current-page="meta.current_page"
           >
           </el-pagination>
         </el-col>
        </el-row>
      </CenterContent>

    </div>
</template>

<script>
import ProductItem from '../../../components/Home/ProductItem'
import request from '../../../request/home/category'
import collect from 'collect.js'
export default {
  name: 'Product',
  components: { ProductItem },
  data () {
    return {
      breadcrumb: [
        { title: '产品' }
      ],
      product: [],
      links: [],
      meta: []
    }
  },
  computed: {
    chuckProudct () {
      console.log(this.product.length)
      if (this.product.length !== 0) {
        const collection = collect(this.product)
        return collection.chunk(6)
      }
      return []
    }
  },
  methods: {
    // 设置页面数据的状态
    setPageDate () {
      // 显示加载框
      const loading = this.$loading({
        lock: true,
        text: '正在努力加载中......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      request.categoryInfo(this.$route.params.id, result => {
        this.product = result.data
        this.links = result.links
        this.meta = result.meta
        loading.close()
      })
    },
    // 跳转到详情页面
    jumpShow (id) {
      this.$router.push({ name: 'product.show', params: { id: id } })
    }
  },
  mounted () {
    this.setPageDate()
  },
  watch: {
    '$route' () {
      this.setPageDate()
    }
  }
}
</script>

<style scoped lang="scss">
  .product-list {
    padding: 20px 0;
    background: #f9f9f9;
    .product-where {
      margin-top: 20px;
      font-size: 14px;

    }
    .product-screening {
      margin-top: 30px;
      font-size:24px ;
      background: #f9f9f9;
    }
    .product-list-a{
      text-decoration: none;
    }
  }
</style>
